<template>
  <a-spin :spinning="spinning" tip="登录中,请稍后...">
    <div class="d-cerlogin">
      <div class="d-cerlogin-children">
        <div class="title">
          <h1>登录苹果开发者账号</h1>
        </div>
        <a-form layout="vertical" :model="formInline" @submit="onSubmitCer(formInline)">
          <a-form-item>
            <a-input v-model:value="formInline.name" placeholder="账号">
              <template v-slot:prefix>
                <UserOutlined style="color:rgba(0,0,0,.25)" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input v-model:value="formInline.pass" type="pass" placeholder="密码">
              <template v-slot:prefix>
                <LockOutlined style="color:rgba(0,0,0,.25)" />
              </template>
            </a-input>
          </a-form-item>
          <div>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
                :disabled="formInline.name === '' || formInline.pass === ''"
              >登录</a-button>
            </a-form-item>
          </div>
        </a-form>
      </div>
    </div>
    <VerificationCode :codeVisible="codeVisible" @onCodeVisible="onCodeVisible" />
    <ChoosePhone
      :phoneVisible="phoneVisible"
      :phoneList="phoneList"
      @onPhoneVisible="onPhoneVisible"
    />
  </a-spin>
</template>

<script lang='ts'>
import { UserOutlined, LockOutlined } from "@/components/AntDesign/icons/icons";
import VerificationCode from "@/components/CerModule/CerUpload/childComponent/VerificationCode/Code.vue";
import ChoosePhone from "@/components/CerModule/CerUpload/childComponent/ChoosePhone/CellPhone.vue";
import { onBeforeUnmount, reactive, toRefs } from "vue";
import { $message } from "@/components/AntDesign/message";
import io from "socket.io-client";
import $router from "@/router";
export default {
  components: {
    UserOutlined,
    LockOutlined,
    VerificationCode,
    ChoosePhone,
  },
  setup() {
    const data = reactive({
      formInline: {
        name: "",
        pass: "",
      },
      codeVisible: false,
      phoneVisible: false,
      spinning: false,
      phoneList: [],
    } as {
      formInline: {
        name: string;
        pass: string;
      };
      codeVisible: boolean;
      phoneVisible: boolean;
      spinning: boolean;
      phoneList: string[];
    });

    /* 连接 socket*/
    const socket = io((window as any).$URL, {
      query: ("Authorization=" + localStorage.getItem("token")) as string,
      autoConnect: false
    });
    socket.on("connect", () => {
      console.log("链接成功");
    });
    socket.on("disconnect", () => {
      console.log("断开连接");
    });

    function error() {
      data.spinning = false;
      data.phoneVisible = false;
      data.codeVisible = false;
      socket.disconnect();
      $message("error", "验证错误");
    }

    function onSubmitCer(param: { name: string; pass: string }) {
      param.name = param.name.replace(/\s/g, "");
      param.pass = param.pass.replace(/\s/g, "");
      /* 连接socket */
      socket.open();
      // /* 发送登录请求 */
      socket.emit("logins", param);

      /* 登录单个手机 */
      socket.on("onesend", (res: { code: number; msg: string }) => {
        if (res.code == 201) {
          data.spinning = true;
          setTimeout(() => {
            data.spinning = true;
            data.codeVisible = true;
          }, 1000);
          /* 单个手机监听账号密码是否正确 ,是否登录成功*/
          socket.emit("monitor", { code: res.code });
        }
      });

      /* 登录多个手机 */
      socket.on("towsend", (res: { code: number; data: string[] }) => {
        if (res.code == 203) {
          data.phoneList = res.data
            .join()
            .replace(/\w\.\s/g, "")
            .split(",");
          data.phoneVisible = true;
          /* 多个手机监听账号密码是否正确 ,是否登录成功*/
          socket.emit("monitor", { code: res.code });
        } else {
          error();
        }
      });

      /* 登录成功监听回调 */
      socket.on("success", (res: { code: number }) => {
        if (res.code == 200) {
          $message("success", "登录成功");
          data.spinning = false;
          $router.push({ path: "/cerlist" });
          socket.disconnect();
        } else {
          error();
        }
      });
    }

    /* 验证码组件事件 */
    function onCodeVisible(code: string) {
      socket.emit("sendcode", { code });
      data.spinning = true;
      data.codeVisible = false;
    }
    /* 选择手机事件 */
    function onPhoneVisible(index: number) {
      data.phoneVisible = false;
      socket.emit("picking", { radio: index });
    }

    /* 生命周期函数,离开当前页面 */
    onBeforeUnmount(() => {
      socket.disconnect();
    });

    return {
      ...toRefs(data),
      onSubmitCer,
      onCodeVisible,
      onPhoneVisible,
    };
  },
};
</script>

<style lang="less" scoped>
.d-cerlogin {
  text-align: center;
  width: 40%;
  margin: 0 auto;
  padding: 20px;
  height: 500px;
  .d-cerlogin-children {
    width: 50%;
    margin: 0 auto;
    position: relative;
    top: 50%;
    margin-top: -176px;
    .title h1 {
      font-weight: bold;
      font-size: 20px;
      margin: 25px 0;
    }
    .ant-btn {
      width: 100%;
      height: 40px;
      border-radius: 4px;
    }
  }
}
.ant-form-vertical .ant-form-item {
  padding-bottom: 0px;
}
</style>